{% extends 'base.html' %}
{% load static %}
{% block title %}
    碎言碎语
{% endblock %}

{% block mycss %}
    {{ block.super }}
    <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/learn.css' }}"  rel="stylesheet">

{% endblock %}
<style>
    #readmore1{
        width: 100px;
        height: 40px;
        background: red;
    }
</style>

{% block content %}
    <article>
        <aside>
        <div class="my-container">
            <h2 class="ctitle"><b>碎言碎语</b></h2>
            <br>
            <ul class="cbp_tmtimeline">
                {% for article in articles %}
                    <li>
                        <time class="cbp_tmtime">
                            <span>{{ article.date |slice:"4" }}</span>
                            <span>{{ article.date |slice:"5:10" }}</span>
                        </time>

                        <div class="cbp_tmlabel" data-scroll-reveal="enter right over 1s">
                            <h2>{{ article.title }}</h2>
                            <div>
                            <p>
                                <span class="blogpic">
                                    <img id="{{ article.title }}" style="width: 100%; height: 100%" src="">
                                </span>
                                <a href="/articles/mindsay/detail/{{ article.article_id}}.html">
                                    {{ article.description }}
                                </a>
                            </p>
                                </div>
                            <div id="readmore1">
                                <a href="/articles/mindsay/detail/{{ article.article_id}}.html" target="_blank" class="readmore">阅读全文>></a>
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
            <br>
        </div>
        </aside>
    </article>

    <script>
        $("document").ready(function(){
            var img=$("article img");
            for(var i = 0;i < img.length; i++){
                var id = img.get(i).id;
                if (id.length > 0){
                    set_image(id, id);
                }
            }
        })
{% comment %}
                    for (var i = 0; i < data.articles.length; i++) {
                    set_image(data.articles[i].title, "image-" + i);
                }{% endcomment %}
    </script>

{% endblock %}


